<template>
  <div class="ele-body">
    <el-card shadow="never">
      <template v-slot:header>
        <el-form :model="form" ref="formRef">
          <el-form-item label="选择部门：" prop="dept_id" style="margin-bottom: 0">
            <el-select v-model="form.dept_id" placeholder="请选择部门" @change="handleQueryData" clearable>
              <el-option v-for="item in options2" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <div class="info-list">
        <div class="list">
          <div>
            <div>{{ statisticsData.created || ' --' }}</div>
            <div style="margin-top: 5px;">待指派</div>
          </div>
          <div></div>
        </div>
        <div class="list">
          <div>
            <div>{{ statisticsData.assigned || ' --' }}</div>
            <div style="margin-top: 5px;">已指派</div>
          </div>
          <div></div>
        </div>
        <div class="list">
          <div>
            <div>{{ statisticsData.accept || ' --' }}</div>
            <div style="margin-top: 5px;">已接受</div>
          </div>
          <div></div>
        </div>
        <div class="list">
          <div>
            <div>{{ statisticsData.begin || ' --' }}</div>
            <div style="margin-top: 5px;">进行中</div>
          </div>
          <div></div>
        </div>
        <div class="list">
          <div>
            <div>{{ statisticsData.today || ' --' }}</div>
            <div style="margin-top: 5px;">今日完成</div>
          </div>
          <div></div>
        </div>
        <div class="list">
          <div>
            <div>{{ statisticsData.timeout || ' --' }}</div>
            <div style="margin-top: 5px;">超时工单</div>
          </div>
          <div></div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" v-loading="loading">
      <template v-slot:header>
        <h5 style="color: rgb( 0 0 0 /.7);font-weight: bold">
          区域工单统计
        </h5>
      </template>
      <Echarts ref="echartsRef"/>
    </el-card>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Echarts from './components/echarts.vue'

export default {
  name: 'SystemLevel',
  components: {
    Echarts
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      form: {
        dept_id: null
      },
      statisticsData: {},
      loading: false,
      options2: []
    }
  },
  mounted() {
    this.handleQueryData()
    this.handleQueryParams()
  },
  methods: {
    async handleQueryData(id) {
      this.loading = true
      const res = (await this.$http.get('/reports/zone_work_order', {params: {dept_id: id}})).data
      res.success ? (() => {
        this.statisticsData = res.data.totals;
        this.$refs.echartsRef.setEChartsOptions(res.data.dept_data)
      })() : this.$message.error(res.msg)
      this.loading = false
    },
    handleQueryParams() {
      this.$http.get('dept/index').then(res => {
        res.data.code === 0 ? this.options2 = res.data.data : this.$message.error(res.data.msg);
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.info-list {
  display: flex;
  justify-content: space-around;

  >.list:nth-child(1){
    margin-left: 0;
  }
  >.list:nth-last-child(1){
    margin-right: 0;
  }

  .list {
    width: 210px;
    margin: 0 10px;
    height: 85px;
    color: #FFFFFF;
    font-size: 32px;
    background:var(--color-primary);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;


    > div:nth-child(1) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      flex: 3;
      margin-left: 10px;

      > div:nth-child(2) {
        font-size: 12px;
        margin-left: 2px;
      }
    }

    > div:nth-child(2) {
      flex: 2;
      height: 100%;
      background: url("~@/assets/image/workorder@2x.png") no-repeat center;
      background-size: auto 70%;
    }
  }
}


</style>
